<!-- 快递发放证书 --> 
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="800px"
    @close="handleClose"
    append-to-body
  >
    <!-- 表格数据 -->
    <el-table :data="tableData" style="width: 100%" border :show-header="true">
      <el-table-column prop="certificateNo" label="证书编号" width="180" />
      <el-table-column prop="studentName" label="姓名" width="120" />
      <el-table-column prop="idNumber" label="证件编号" width="180" />
      <el-table-column prop="phonenumber" label="电话" width="120" />
      <el-table-column prop="trackingNo" label="快递单号">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.trackingNo"
            placeholder="请输入快递单号"
            size="small"
          />
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "FastIssuePaperCertificateDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    certificateData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogTitle: "填写快递单号",
      formData: {},
      // uploadMode: "覆盖",
      fileList: [],
      tableData: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.initTableData();
      }
    },
    certificateData: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.tableData = newVal.map((item) => ({
            ...item,
            trackingNo: "",
          }));
        }
      },
      deep: true,
    },
  },
  methods: {
    initTableData() {
      if (this.certificateData && this.certificateData.length > 0) {
        this.tableData = this.certificateData.map((item) => ({
          ...item,
          trackingNo: "",
        }));
      }
    },

    handleClose() {
      this.$emit("update:visible", false);
      this.resetForm();
    },

    handleCancel() {
      this.$emit("update:visible", false);
      this.resetForm();
    },

    resetForm() {
      this.formData = {};
      // this.uploadMode = "覆盖";
      this.fileList = [];
      this.tableData = [];
    },

    handleSubmit() {
      // 验证表单
      if (this.tableData.some((row) => !row.trackingNo)) {
        this.$message.warning("请填写所有快递单号");
        return;
      }

      const submitData = {
        certificateIssueList: this.tableData.map((item) => ({
          certificateIssueId: item.certificateIssueId,
          trackingNo: item.trackingNo,
        })),
        // certificateIssueIds: this.tableData.map(
        //   (item) => item.certificateIssueId
        // ),
        // trackingNos: this.tableData.map((item) => item.trackingNo),
        // uploadMode: this.uploadMode,
      };

      this.$emit("submit", submitData);
      this.handleCancel();
    },
  },
};
</script>

<style scoped>
.el-upload {
  margin-top: 10px;
}
.dialog-footer {
  text-align: right;
  padding: 20px 0;
}
.dialog-footer .el-button {
  margin-left: 10px;
}
</style> 

